<template>
  <div>
    <h1>阿里巴巴股份有限公司 联系人：马云 </h1>
    <div id="box">
      <ul>
        <li>联系我们</li>
        <li>关于我们</li>
        <li>投资合作</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "foot"
}
</script>

<style lang="less">
// lang="less"  规范css使用哪种预编译器
// 1.less 创建变量
@baseColor: #f00f00;
@baseWidth: 800px;
@font: 30px;
// 3.处理边框混入
.myborder {
  border: 2px solid black;
  border-radius: 50%;
}
// 5.函数
#colors(@mycolor,@mybg) {
  color: @mycolor;
  background: @mybg;
}
#box {
  width: @baseWidth;
  height: 200px;
  background: @baseColor;
  // 2 嵌套写法
  ul {
    background: salmon;
    li {
      width: 200px;
      height: 100px;
      float: left;
      // 4.可以进行算数运算
      font-size: @font - 5px;
      list-style: none;
      margin-left: 20px;
      // 调用混入
      .myborder();
      #colors(#ffffff,#ff0); //调用函数
      &:hover {
        //每个li hover的时候
        background: darkgreen;
      }
      &:nth-child(2) {
        //第二个li
        background: deeppink;
      }
    }
  }
}
</style>